<template>
	<div>
		<span id="qqLoginBtn" v-show="false"></span>
		<m-svg-icon
			class="w-4 h-4 cursor-pointer"
			name="qq"
			@click="onQQLogin"
		></m-svg-icon>
	</div>
</template>

<script setup>
import { onMounted, queuePostFlushCb } from 'vue'
import { isMobileTerminal } from '@/utils/flexible.js'
import brodacast from './brodacast.js'
import { oauthLogin } from './oauth.js'

// QQ登录挂起
onMounted(() => {
	QC.Login(
		{
			btnId: 'qqLoginBtn',
		},
		(data, opts) => {
			console.log('QQ登录成功', data)
			// 注销登录，防止下次打开页面直接展示上一次的用户信息
			QC.Login.signOut()

			//拿到QQ用户的唯一标识，通过这个标识判断用户在系统中是否注册了
			const accessToken = /access_token=((.*))&expires_in/.exec(
				window.location.hash
			)[1]

			// 拼接获取到的数据对象
			const oauthObj = {
				nickname,
				figureurl_qq_2,
				accessToken,
			}
			brodacast.send(oauthObj)

			// 移动端下没有窗口的概念, 直接触发登录
			oauthLogin('QQ', oauthObj)

			window.close()
		}
	)
})

const onQQLogin = () => {
	openQQWindow()
}

// 处理qq登录视窗
const openQQWindow = () => {
	window.open(
		'https://graph.qq.com/oauth2.0/authorize?client_id=101998494&response_type=token&scope=all&redirect_uri=https%3A%2F%2Fimooc-front.lgdsunday.club%2Flogin',
		'oauth2Login_10609',
		'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no,location=yes, resizable=yes'
	)

	brodacast.wait().then((oauthObj) => {
		brodacast.clear()

		// 执行登录操作
		oauthLogin('QQ', oauthObj)
	})
}
</script>

<style scoped lang="scss"></style>
